<template>
  <view class="root">
    <acme-app-bar title="ShareSheet"></acme-app-bar>
    
    <acme-cell-group :radius="10" width="95%">
      <acme-cell title="显示分享面板" link @click="showPopup('center')"/>
    </acme-cell-group>
    
    <acme-share-sheet v-model="show" :actions="actions"></acme-share-sheet>
  </view>
</template>

<script>
  import AcmeCellGroup from "@/components/acme-design/cell-group"
  import AcmeCell from "@/components/acme-design/cell"
  import AcmeShareSheet from "@/components/acme-design/share-sheet"
  export default {
    components: {
      AcmeCellGroup,
      AcmeCell,
      AcmeShareSheet
    },
    data() {
      return {
        show: false,
        safeAreaHeight: 0,
        actions: [
          {
            title: '微信',
            color: '#3BBB07',
            img: '/static/share-sheet/wechat.png',
            key: 'Wechat',
          },{
            title: '朋友圈',
            color: '#9FCE18',
            img: '/static/share-sheet/moments.png',
            key: 'WechatMoments',
          },{
            title: 'QQ',
            color: '#3BAFFC',
            img: '/static/share-sheet/qq.png',
            key: 'QQ',
          },{
            title: 'QQ空间',
            color: '#FCCC54',
            img: '/static/share-sheet/qq-kj.png',
            key: 'QQSpace',
          },{
            title: '微博',
            color: '#F75669',
            img: '/static/share-sheet/weibo.png',
            key: 'MicroBlog',
          },{
            title: '链接',
            color: '#3BAFFC',
            img: '/static/share-sheet/link.png',
            key: 'link',
          }
        ]
      };
    },
    mounted() {
      this.getSystemInfo() 
    },
    methods: {
      showPopup() {
        this.show = !this.show
      },
      getSystemInfo() {
        try {
          const res = uni.getSystemInfoSync()
          this.safeAreaHeight = res.safeAreaInsets.bottom
        } catch (e) {}
      },
    },
  };
</script>

<style lang="scss" scoped>
  .root {
    overflow: hidden;
    padding-top: 20px;
  }
</style>